<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="~{common/header :: commonHead}">

    <title>账号详情</title>
</head>

<!--<link rel="stylesheet" href="/static/layui/css/layui.css" media="all">-->
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5 th:text="${null == editable ? '添加账号' : '修改账号'}"></h5>
                    <span style="color: red"> （带*号必填）</span>
                    <div class="ibox-tools">
                    </div>
                </div>

                <div class="ibox-content">
                    <form class="row form-body form-horizontal m-t" id="adminForm" method="post"
                          th:action="${null == editable ? '/admin/add' : '/admin/edit'}">
                        <input name="id" th:value="${editable?.id}" style="display: none">
                        <div class="col-md-12 droppable sortable ui-droppable ui-sortable">

                            <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                <label class="col-sm-3 control-label">账号：</label>
                                <div class="col-sm-6">
                                    <input type="text" id="account" name="account" class="form-control"
                                           th:value="${editable?.account }" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"  placeholder="请输入想要使用的账号（不可输入空格，账号注册完成后，不可修改！）">
                                </div>
                                <span style="color: grey;line-height: 31px;">(注:账号不可被修改)</span>
                            </div>
                            <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                <label class="col-sm-3 control-label">名称：</label>
                                <div class="col-sm-6">
                                    <input type="text" onkeyup="value=value.replace(/\s/g,'')" name="name" id="name" class="form-control"
                                           th:value="${editable?.name }" placeholder="请输入名称（不可输入空格）">
                                </div>
                            </div>
                            <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                <label class="col-sm-3 control-label">密码：</label>
                                <div class="col-sm-6">
                                    <input type="text" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"  id="pass1" name="password" class="form-control" placeholder="请输入密码（密码不能填写中文汉字，特殊符号）">
                                </div>
                            </div>
                            <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                <label class="col-sm-3 control-label">确认密码：</label>
                                <div class="col-sm-6">
                                    <input type="text" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"  id="pass2" class="form-control"  placeholder="请输入确认密码（密码不能填写中文汉字，特殊符号）">
                                </div>
                            </div>
                            <div class="form-group draggable ui-draggable dropped" style="position: static">
                                <label class="col-sm-3 control-label">账号类型：</label>
                                <div class="col-sm-6">
                                    <select  required class="form-control" name="level" id="to-link">
                                        <option value="">--请选择--</option>
                                        <option th:selected="${editable?.level == 1}" value="1">商管端</option>
                                        <option th:selected="${editable?.level == 2}" value="2">商户端总账号</option>
                                        <option th:selected="${editable?.level == 3}" value="3">商户端分账号</option>

                                    </select>
                                </div>
                            </div>
                            <div class="form-group draggable ui-draggable dropped" id="store"
                                 th:style="${'position: static; display:' + (editable?.level == 2 || editable?.level == 3 ? 'block' : 'none')}">
                                <label class="col-sm-3 control-label">选择商户：</label>
                                <div class="col-sm-6">
                                    <select  id="orgId" name="storeId" data-placeholder="请选择活动..."
                                             class="chosen-select form-control m-b" tabindex="1">
                                        <option value="">--请选择--</option>
                                        <option class="id_option" hassubinfo="true"
                                                th:each="storeDTO:${storeInfoDTO.storeDTOS}"
                                                th:selected="${storeDTO.id == editable?.storeId}"
                                                th:value="${storeDTO.id}"
                                                th:text="${storeDTO.storeName}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group draggable ui-draggable">
                                <div class="col-sm-12 col-sm-offset-3">
                                    <button id="bb" class="btn btn-primary" type="submit">保存内容</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/js/plugins/chosen/chosen.jquery.js"></script>
<script th:inline="javascript">
    $(function () {

        $("#orgId").comboSelect();
        $("#orgId2").comboSelect();

    });
    let entity = [[${editable}]];

    $("#bb").click(function (e) {
        e.preventDefault();
        let pass1 = $("#pass1").val();
        let pass2 = $("#pass2").val();
        let account = $("#account").val();
        let name = $("#name").val();
        if (account==null || account ===''){
            layer.msg("请输入账号",{icon: 15,time: 1000,shade : [0.5 , '#000' , true]});
            return;
        }
        if (name==null || name === ''){
            layer.msg("请输入名称",{icon: 15,time: 1000,shade : [0.5 , '#000' , true]});
            return;
        }
        if (pass1==null || pass1 === ''){
            layer.msg("请输入密码",{icon: 15,time: 1000,shade : [0.5 , '#000' , true]});
            return;
        }
        if (pass2==null || pass2 === ''){
            layer.msg("请输入确认密码",{icon: 15,time: 1000,shade : [0.5 , '#000' , true]});
            return;
        }
        if (entity==null){
            $.get('/admin/find/' + account,function (res){
                if (res.data == true) {
                    layer.msg("账户已存在",{icon: 15,time: 1000,shade : [0.5 , '#000' , true]});
                }else {
                    if(pass1!=pass2){
                        layer.msg("两次输入密码不一致",{icon: 15,time: 1000,shade : [0.5 , '#000' , true]});
                    }else{
                        $("#adminForm").submit();
                    }
                }
            });
        } else {
            if(pass1!=pass2){
                layer.msg("两次输入密码不一致",{icon: 15,time: 1000,shade : [0.5 , '#000' , true]});
            }else{
                $("#adminForm").submit();
            }
        }

    });

    $("#to-link").change(function () {
        let selection = $(this).val();
        if (selection == 1 || selection == '') {
            $("#store").css('display', 'none');
        }
        if (selection == 2) {
            $("#store").css('display', 'block');
            $("#store").attr('required', 'required');
        }
        if (selection == 3) {
            $("#store").css('display', 'block');
            $("#store").attr('required', 'required');
        }
    })
</script>
</body>
</html>